<template>
  <div>
    <div class="top">
      <el-button
        size="mini"
        type="primary"
        plain
        :disabled="dis.delete"
        @click="Button_on_delete()"
      >删除归还单</el-button>
      <el-button
        size="mini"
        type="primary"
        plain
        :disabled="dis.return"
        @click="Button_on_sure()"
      >确定归还</el-button>
      <el-button
        size="mini"
        type="primary"
        plain
        :disabled="dis.submit"
        @click="Button_on_check()"
      >提交盘点单</el-button>

      <div class="top-check">
        <el-form :inline="true" :model="checkForm" size="mini">
          <el-form-item label="归还单编码">
            <el-input v-model="checkForm.returnRef"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="checkForm.statu" placeholder="请选择状态">
              <el-option label="归还盘点中" value="归还盘点中"></el-option>
              <el-option label="申请归还中" value="申请归还中"></el-option>
              <el-option label="完成归还" value="完成归还"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="checkForm.appDate"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="借用人">
            <el-input v-model="checkForm.borrowername"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="CheckSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clear_find">清空查询条件</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="return_list">
      <el-table
        border
        :data="return_list"
        :stripe="true"
        @row-click="selectRow"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        tooltip-effect="light"
        highlight-current-row
        height="400"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnRef" label="编号" width="200"></el-table-column>
        <el-table-column prop="statu" label="状态" width="95"></el-table-column>
        <el-table-column prop="appDate" label="预约归还日期" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="borrowcode" label="借用单号" width="225"></el-table-column>
        <el-table-column show-overflow-tooltip prop="barrowerOrgname" label="借用机构" width="300"></el-table-column>
        <el-table-column prop="borrowername" label="借用人" width="95"></el-table-column>
        <el-table-column prop="bizname" label="业务员" width="95"></el-table-column>
        <el-table-column show-overflow-tooltip prop="memo" label="备注" width="125"></el-table-column>
      </el-table>
    </div>
    <div class="detail">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-s-order"></i>
            单号:{{ref}} 借用机构:{{orgname}}借用人:{{borrower}}
          </span>
          <div>
            <el-table
              border
              :data="detaillist"
              size="mini"
              :row-style="{height:'5px'}"
              :cell-style="{padding:'5px 0'}"
              :height="250"
            >
              <el-table-column label="序号" width="50">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品编码" width="250" prop="code"></el-table-column>
              <el-table-column label="商品名称" prop="name" width="200"></el-table-column>
              <el-table-column show-overflow-tooltip prop="spec" label="规格型号" width="250"></el-table-column>
              <el-table-column show-overflow-tooltip prop="count" label="借用数量" width="95"></el-table-column>
              <el-table-column show-overflow-tooltip label="单位" prop="unitname" width="125"></el-table-column>
              <el-table-column prop="memo" show-overflow-tooltip label="备注" width="410"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="delete">
      <el-dialog
        title="删除归还单"
        :visible.sync="visible_delete"
        :modal-append-to-body="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="500px"
      >
        <div class="notify">
          <p>
            <strong>注意：</strong>
            <br />该行为可能要丢失该相关重要的数据
          </p>
        </div>
        <p>
          你确定要删除
          <strong>{{selectedRow.returnRef}}</strong>
          吗？
        </p>

        <div slot="footer" class="dialog-footer">
          <el-button @click="closedialog">取 消</el-button>
          <el-button type="primary" @click="Submit_delete()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="surereturn">
      <el-dialog
        title="确定归还"
        :visible.sync="visible_sure"
        :modal-append-to-body="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="500px"
      >
        <div class="notify">
          <p>
            <strong>注意：</strong>
            <br />确定归还后，不能删除该归还单
          </p>
        </div>
        <p>
          你确定要归还
          <strong>{{selectedRow.returnRef}}</strong>
          吗？
        </p>

        <div slot="footer" class="dialog-footer">
          <el-button @click="closedialog">取 消</el-button>
          <el-button type="primary" @click="Submit_return()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="summitcheck">
      <el-dialog
        title="归还盘点"
        :visible.sync="visible_check"
        :modal-append-to-body="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="500px"
      >
        <p>
          你确定要提交盘点
          <strong>{{selectedRow.returnRef}}</strong>
          吗？
        </p>

        <div slot="footer" class="dialog-footer">
          <el-button @click="visible_check = false">取 消</el-button>
          <el-button type="primary" @click="Submit_check()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible_delete: false,
      visible_sure: false,
      visible_check: false,
      ref: "",
      orgname: "",
      borrower: "",
      detaillist: [],
      return_list: [],
      checkForm: {
      },
      selectedRow: {},
      dis: {
        delete: true,
        return: true,
        submit: true
      }
    };
  },
  created() {
    this.refresh();
  },
  methods: {
    clear_find() {
      this.checkForm = {};
    },
    CheckSubmit() {
      this.$http.post("assetReturn/search", this.checkForm).then(response => {
        this.return_list = response.data;
      });
    },
    closedialog() {
      this.visible_delete = false;
      this.visible_sure = false;
    },
    refresh() {
      this.$http.get("assetReturn/list").then(response => {
        this.return_list = response.data;
      });
    },
    Button_on_xxx() {},
    selectRow(row) {
      window.console.log(row);
      this.Refresh_Detail(row.borrowId);
      this.selectedRow = JSON.parse(JSON.stringify(row));
      this.ref = row.returnRef;
      this.orgname = row.barrowerOrgname;
      this.borrower = row.borrowername;
      switch (row.statu) {
        case "申请归还中": {
          this.dis.delete = false;
          this.dis.return = false;
          this.dis.submit = true;
          break;
        }
        case "正在归还": {
          this.dis.delete = true;
          this.dis.return = true;
          this.dis.submit = false;
          break;
        }
        case "完成归还": {
          this.dis.delete = true;
          this.dis.return = true;
          this.dis.submit = true;
          break;
        }
        case "归还盘点中": {
          this.dis.delete = true;
          this.dis.return = true;
          this.dis.submit = true;
          break;
        }
      }
    },
    Refresh_Detail(id) {
      this.$http
        .post("BorrowDetailDetail/somelist", { borrowref: id })
        .then(response => {
          this.detaillist = response.data;
        });
    },
    check() {
      if (this.selectedRow.id == null || this.selectedRow == "") {
        this.$message.error("请选择一个归还单");
        return false;
      } else {
        return true;
      }
    },
    Button_on_delete() {
      if (this.check()) {
        this.visible_delete = true;
      }
    },
    Button_on_sure() {
      if (this.check()) {
        this.visible_sure = true;
      }
    },
    Button_on_check() {
      if (this.check()) {
        this.visible_check = true;
      }
    },

    Submit_delete() {
      this.$http
        .post("assetReturn/delete", { id: this.selectedRow.id })
        .then(response => {
          if (response.data == "success") {
            this.$message({
              type: "success",
              message: "删除完成"
            });
            this.visible_delete = false;
            this.refresh();
          }
        });
    },
    Submit_return() {
      this.selectedRow.statu = "正在归还";
      this.$http.post("assetReturn/update", this.selectedRow).then(response => {
        if (response.data == "success") {
          this.$message({
            type: "success",
            message: "操作完成"
          });
          this.visible_sure = false;
          this.refresh();
        }
      });
    },
    Submit_check() {
      this.selectedRow.statu = "归还盘点中";
      let pandian = {
        id: "",
        typename: "归还盘点",
        storeid: "",
        returnRef: this.selectedRow.returnRef,
        checkRef: "/",
        calRef: "/",
        date: "",
        bizname: this.selectedRow.bizname,
        memo: "",
        statu: "待盘点",
        storename: ""
      };
      var day = new Date();
      day.setTime(day.getTime());
      pandian.checkRef =
        "CO" +
        day.getFullYear() +
        (day.getMonth() + 1) +
        day.getDate() +
        day.getHours() +
        day.getMinutes() +
        day.getSeconds();
      pandian.date =
        day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
      this.$http.get("borrow/list").then(response => {
        let list = response.data;
        list.forEach(row => {
          if (row.ref == this.selectedRow.borrowcode) {
            pandian.storeid = row.storeid;
            pandian.storename = row.storename;
          }
        });
        window.console.log("pandian", pandian);
        this.$http.post("assetCheck/insert", pandian).then(response => {
          this.detaillist.forEach(row => {
            row.checkId = response.data;
          });
          this.$http
            .post("assetCheckDetail/insert", this.detaillist)
            .then(response => {
              if (response.data == "success") {
                this.$http
                  .post("assetReturn/update", this.selectedRow)
                  .then(response => {
                    if (response.data == "success") {
                      this.$message({
                        type: "success",
                        message: "操作完成"
                      });
                      this.visible_check = false;
                      this.refresh();
                    }
                  });
              }
            });
        });
      });
    }
  }
};
</script>
